<template>
  <!-- 采购付款 -->
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" @selection-change="e => selection = e" ref="SuperTablePage">
    </ex_super_table_page>
    <auditDialog ref="auditDialog" @submit="reload" />

    <!-- 申请付款 -->
    <applyPayDialog ref="applyPayDialog" @submit="reload" />
  </div>
</template>

<script>
import superTablePageFunction from "@/mixin/super-table-page-function";
import page_table_model_manage from "@/mixin/page_table_model_manage";
import emitOnFunction from "@/mixin/emit-on-function";
import auditDialog from "@/page/oms/purchase/dialog/audit_dialog"
import applyPayDialog from "@/page/oms/purchase/dialog/apply_pay_dialog"
let emitKey = "oms>purchase>purchase_pay";

export default {
  title: 'label_purchase_pay',
  components: {
    auditDialog,
    applyPayDialog
  },
  mixins: [
    superTablePageFunction,
    emitOnFunction(emitKey),
    page_table_model_manage,
  ],
  props: {
  },
  data() {
    return {
      option: {
        search: {
          default: { paymentStatus: "" },
          resetFieldFun: (def, org) => { def.paymentStatus = org.paymentStatus; return def },
          // formDataHandle: (data) => {
          //   return data
          // },
          model: [
            {
              key: 'paymentStatus', label: 'label_status', itemClass: "w_fill",
              type: 'select',
              enum: 'PurchaseAuditStatusEnum',
              render: (h, { data }) => {
                const list = this.$enumOptions.PurchaseAuditStatusEnum
                  .map(it => (
                    <el-radio-button key={it} label={it}>
                      {this.$enumShow(it, 'PurchaseAuditStatusEnum')}
                    </el-radio-button>
                  ))
                return (<el-radio-group value={data.paymentStatus}
                  onInput={e => {
                    this.$set(data, 'paymentStatus', e)
                    this.$refs.SuperTablePage.loadDataForSearch()
                  }}>
                  <el-radio-button key="" label="">
                    {this.$tt("label_all")}
                  </el-radio-button>
                  {list}
                </el-radio-group>
                )
              }
            },
            { label: "label_customer", key: "customerId", type: 'common_customer_choose' },
            {
              label: "label_supplier",
              key: "supplierId",
              type: "supplier_select_input"
            },
            {
              label: "label_platform_type",
              key: "purchaseType",
              type: "select",
              enum: "PurchasePlatformTypeEnum",
            },
            {
              label: "label_purchase_order_code",
              key: "code",
            },
            {
              label: "label_platform_order_1688",
              key: "platformOrderNo",
            },
            {
              label: "label_warehouse_name",
              key: "warehouseId",
              type: "base_warehouse_select",
            },
          ],
        },
        actionExtra: [
          {
            label: "label_export",
            click: this.exportExcel,
            auth: 'oms_purchase_pay_export',
          },
        ],
        table: {
          url: "/oms-api/purchase/OmsPurchaseOrderPaymentRpc/selectPage.json",
          model: this.init_table_model(),
        },
      },
    }
  },
  watch: {
  },
  computed: {

  },
  created() {
  },
  mounted() {

  },
  methods: {
    option_table_model() {
      return [
        {
          type: "selection",
          clickToggle: true,
          keyGroup: "label_table_operate",
        },
        {
          key: "code",
          label: "label_purchase_order_code",
          "min-width": 150,
          "show-overflow-tooltip": true,
          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return this.$tt('data_temp_none')
            return (<text_extra_tooltip_operate extra_barcode_image extra_text_align='center'
              value={code}
              data_type={column.property} data_id={row.id}
            />)
          }
        },
        {
          label: "label_platform_order_1688",
          key: "platformOrderNo",
          "min-width": 150,
          "show-overflow-tooltip": true,
          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return this.$tt('data_temp_none')
            return (<text_extra_tooltip_operate extra_barcode_image extra_text_align='center'
              value={code}
              data_type={column.property} data_id={row.id}
            />)
          }
        },
        {
          key: "customerName",
          label: "label_customer",
          "min-width": 130,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode),
          "show-overflow-tooltip": true,
        },
        {
          key: "supplierName",
          label: "label_supplier",
          "min-width": 130,
          "show-overflow-tooltip": true,
          formatter: (r, c, v) => this.$formatNameCode(v, r.supplierOnlyCode),
        },
        {
          label: "label_platform_type",
          key: "purchaseType",
          "min-width": 130,
          "show-overflow-tooltip": true,
          formatter: (r, c, v, i) =>
            this.$enumShow(v, "PurchasePlatformTypeEnum"),
        },
        {
          key: "warehouseName",
          label: "label_warehouse_name",
          "min-width": 130,
          "show-overflow-tooltip": true,
          formatter: (r, c, v) => this.$formatNameCode(v, r.warehouseCode),
        },
        {
          key: "purchaser",
          label: "label_sku_buyer",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
        {
          key: "orderNo",
          label: "label_purchase_waybill_number",
          "min-width": 180,
          render: (h, { row, column }) => {
            let divStr = ''
            if (row.omsPurchaseWaybillList) {
              divStr = row.omsPurchaseWaybillList.map(item => {
                return <div>{this.$enumShow(item.logisticsSupplier, "PurchaseOrderLogisticsEnum")}: {item.trackingNumber}</div>
              })

            }
            return (
              <div>
                <div>
                  {row.orderNo ? `${row.purchaseSource}:${row.orderNo}` : ''}
                </div>
                {divStr}
              </div>
            );
          },
        },
        {
          key: "totalAmount",
          label: "label_payment_amount",
          "min-width": 130,
          "show-overflow-tooltip": true,
        },
        {
          key: "gmtCreate",
          label: "label_time",
          width: 170,
          render: (h, { row, column }) => {
            return (
              <div>
                <div>
                  {this.$t("label_create")}:{this.$dateFormat(row["gmtCreate"])}
                </div>
                <div>
                  {this.$t("label_update")}:{this.$dateFormat(row["gmtModify"])}
                </div>
              </div>
            );
          },
        },
        {
          key: "paymentStatus",
          label: "label_status",
          width: 100,
          "show-overflow-tooltip": true,
          formatter: (r, c, v, i) => this.$enumShow(v, "PurchaseAuditStatusEnum"),
        },
        {
          type: "operate",
          width: 150,
          operate: [
            {
              label: 'label_apply_pay',
              if: (data) => ['NOT_APPLY', 'REJECT'].includes(data.paymentStatus), // 未申请、驳回审核 可申请
              auth: 'oms_purchase_apply_pay',
              click: (row) => {
                this.$refs.applyPayDialog.show(row, this.$t('label_apply_pay'))
              }
            },
            {
              label: "label_approved",
              auth: 'oms_purchase_pay_approved',
              if: (data) => data.paymentStatus === 'WAIT_AUDIT', // 待审核才显示
              click: (row) => {
                this.$refs.auditDialog.show({
                  title:this.$t('label_approved'),
                  url:'/oms-api/purchase/OmsPurchaseOrderPaymentRpc/payment.json',
                  examine:true,
                  remarkKey:'paymentRemark',
                  data:row
                })
              }
            },
            {
              label: "label_reject_review",
              auth: 'oms_purchase_pay_reject_review"',
              if: (data) => data.paymentStatus === 'WAIT_AUDIT', // 待审核才显示
              click: (row) => {
                this.$refs.auditDialog.show({
                  title:this.$t('label_reject_review'),
                  url:'/oms-api/purchase/OmsPurchaseOrderPaymentRpc/reject.json',
                  examine:false,
                  remarkKey:'paymentRemark',
                  data:row
                })
              }
            },
            {
              label: "label_detail",
              click: row => {
                this.$router.push({
                  path: './purchase_pay_detail', query: { id: row.id, }
                })
              }
            },
          ],
        },
      ];
    },
    exportExcel() {
      const searchParams = this.$refs.SuperTablePage.getSearchData()
      let idList = []
      if (this.selection) {
        idList = this.selection.map(item => item.id)
      }
      let params = { ...searchParams, idList }
      this.$functionCommon({
        url: "/oms-api/purchase/OmsPurchaseOrderPaymentRpc/exportExcel.json",
        data: params, type: 'form',
      })

    },
  }
};
</script>

<style lang="less" scoped></style>
